<template>
    <FormItem :label="label" :prop="prop">
        <AutoComplete
            v-model="data"
            icon="ios-search"
            :placeholder="placeholder"
            clearable
            @on-search="search"
            @on-select="select"
            @on-clear="clear"
            style="width:100%">
            <div class="auto-complete-item" v-for="item in list" :key="item.OrderNum">
                <div class="auto-complete-group">
                    <span style="margin-left: 10px;">{{ item.Title }}</span>
                    <!-- <a href="https://www.baidu.com/search?q=iView" target="_blank">更多</a> -->
                </div>
                <Option v-for="option in item.Children" :value="option.Id" :key="option.Id">
                    <span class="auto-complete-title">{{ option.Name }}</span>
                    <span class="auto-complete-count">{{ option.Tail }} {{tailexplain}}</span>
                </Option>
            </div>
            <!-- <a href="https://www.baidu.com/" target="_blank" class="auto-complete-more">查看所有结果</a> -->
        </AutoComplete>
    </FormItem>
</template>
<script>
export default {
    name: 'AutoComplete',
    props: {
        label: String,
        prop: String,
        data: Object,
        placeholder: String,
        tailexplain: String,
        list: Array,
        search: Function,
        select: Function,
        clear: Function,
    },
}
</script>
<style scoped>
    .auto-complete-item{
        padding: 4px 0;
        border-bottom: 1px solid #F6F6F6;
    }
    .auto-complete-group{
        font-size: 12px;
        padding: 4px 6px;
        margin-bottom:7px;
    }
    .auto-complete-group span{
        color: #666;
        font-weight: bold;
    }
    .auto-complete-group a{
        float: right;
    }
    .auto-complete-count{
        float: right;
        color: #999;
    }
    .auto-complete-more{
        display: block;
        margin: 0 auto;
        padding: 4px;
        text-align: center;
        font-size: 12px;
    }
</style>